<template>
  <div>
    <el-row>
      <el-col :span="7" v-for="(item, index) in data.vote" class="col">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <div>编号：{{ item.id }}</div>
              <div>标题：{{ item.theme }}</div>
              <div>介绍：{{ item.themeInfo }}</div>
            </div>
          </template>
          <div v-for="i in item.option">
            {{ i.num }}
            <el-progress
              :stroke-width="26"
              class="pro"
              :text-inside="true"
              :percentage="i.num"
              v-if="i.num < 20"
            >
              {{ i.option }}</el-progress
            >
            <el-progress
              :stroke-width="26"
              class="pro"
              :text-inside="true"
              :percentage="i.num"
              v-else-if="i.num < 40"
            >
              {{ i.option }}</el-progress
            >
            <el-progress
              :stroke-width="26"
              class="pro"
              :text-inside="true"
              :percentage="i.num"
              v-else-if="i.num < 60"
            >
              {{ i.option }}</el-progress
            >
            <el-progress
              :stroke-width="26"
              class="pro"
              :text-inside="true"
              :percentage="i.num"
              v-else-if="i.num < 80"
            >
              {{ i.option }}</el-progress
            >
            <el-progress
              :stroke-width="26"
              class="pro"
              :text-inside="true"
              :percentage="i.num"
              v-else-if="i.num < 100"
            >
              {{ i.option }}</el-progress
            >
            <el-progress
              :stroke-width="26"
              class="pro"
              :text-inside="true"
              :percentage="i.num"
              v-else
            >
              {{ i.option }}</el-progress
            >
          </div>

          <el-radio-group v-model="radio3" class="ml-4">
            <div v-for="i in item.option">
              <el-radio :label="i.option" class="radio">{{
                i.option
              }}</el-radio>
            </div>
          </el-radio-group>
          <el-button class="bu" v-if="data.voteStatus[index]" type="warning"
            >已投票</el-button
          >
          <el-button
            class="bu"
            v-if="!data.voteStatus[index]"
            type="primary"
            @click="saveVote(item.id)"
            >点击投票
          </el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref } from "vue";
import axios from "axios";
import { reactive } from "vue";
import { ElMessage } from "element-plus";
const radio3 = ref();
const userId = localStorage.getItem("userId");
const getVoteList = () => {
  axios.get("/vote/getVoteList").then((res) => {
    data.vote = res.data.data;
    axios.get("/user-vote/getUserVoteByUserId/" + userId).then((res) => {
      data.userVote = res.data.data;
      for (var i = 0; i < data.vote.length; i++) {
        data.voteStatus.push(status(data.vote[i]));
      }
    });
  });
  function status(value) {
    for (var j = 0; j < data.userVote.length; j++) {
      if (value.id == data.userVote[j].voteId) {
        return true;
      }
    }
    return false;
  }
};
const data = reactive({
  vote: [],
  userVote: [],
  voteStatus: [],
});
const saveVote = (id) => {
  const userVote = {
    userId: parseInt(localStorage.getItem("userId")),
    voteId: id,
    myOption: radio3.value,
  };
  if (radio3.value != undefined) {
    axios.post("/user-vote/insertUserVote", userVote).then((res) => {
      if (res.data.code == 200) {
        ElMessage.success("投票成功");
      } else {
        ElMessage.error(res.data.message);
      }
      getVoteList();
      location.reload();
    });
  } else {
    ElMessage.error("请选择一项进行投票");
  }
};
getVoteList();
</script>
<style .scoped>
.card-header {
  text-align: center;
}

.text {
  text-align: center;
  margin-top: 20px;
}

.ml-4 {
  margin-bottom: 20px;
}

.radio {
  margin-left: 20px;
}

.bu {
  margin-left: 40%;
}

.pro {
  margin-bottom: 10px;
}

.col {
  margin: 20px;
}
</style>
